<template>
	<div>
		<div v-for="(item,index) in data" :key="index" @click="$router.push({ name: 'AskReplyDetail', params: { role: 'expert', id: item.id } })" >
			<div class="pt16 pb16 pl16 pr16" >
			<div class="replay-card flexsb">
				<img class="br50" :src="item.askAvatar" @error="item.avatar=require('@/assets/icon/avatar.png')" alt="">
				<div class="flexitem pl16">
					<div class="fz16">{{ item.askName }}</div>
					<div class="fz12">的提问期待您的回答</div>
				</div>
				<div class="fz12">{{ getDuration((item.createTime).substring(0,10)) }}</div>
			</div>
			<div class="pt16 flexsb">
				<div class="fz15 lh20">
				  {{ item.description }}
				</div>
				<div class="custombtn1 red fz13 btnpadding ml28" @click.stop="$router.push({ name: 'ReplyForm', params: { role: 'expert', id: item.id } })">写回答</div>
			</div>
		</div>
		<div class="line10px"></div>
		</div>
	</div>
</template>
<script>
import API from '@/services'
import { getDuration } from '@/utils'
export default {
	name: 'OnlineReply',
	data() {
		return {
			data: [],
			getDuration,
		}
	},
	async created() {
		const data = await API.getOnlineReplyList()
		this.data = data
	},
}
</script>
<style lang="scss" scoped>
.replay-card{
	img{
		width: 44px;
		height: 44px;
	}
}
.btnpadding{
	flex-shrink: 0;
}
.router-container{
	padding: 0;
}
</style>
